<!--  -->
<template>
  <el-dialog
    :visible="isShow"
    :width="handleScreenWidthToVw(574) + 'px'"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div slot="title" class="flex-row align-center">
      <div class="fz-18" style="color: #333;">{{dialogTitle}}</div>
      <div class="fz-14 mg-left-20" v-if="ruleForm.updateTime" style="color: #999;">
        最近修改 {{ruleForm.updateTime | dateTimeFormatter}}
      </div>
    </div>
    <div class="dialog-container">
      <div class="dialog-children flex-sub dialog-form-container justify-center">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="资产名称" prop="name">
            <el-input v-model="ruleForm.name" class="form-input" />
          </el-form-item>

          <el-form-item label="资产类型" prop="assetsTypeId">
            <el-select
              v-model="ruleForm.assetsTypeId"
              class="form-input"
              placeholder="请选择资产类型"
            >
              <el-option
                v-for="item in assetTypeList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="型号规格" prop="specifications">
            <el-input
              v-model="ruleForm.specifications"
              class="form-input"
              type="textarea"
              :rows="2"
              placeholder="请输入该资产的型号规格参数"
            />
          </el-form-item>

          <el-form-item label="供应商" prop="supplier">
            <el-input v-model="ruleForm.supplier" class="form-input" placeholder="请输入供应商" />
          </el-form-item>

          <el-form-item label="采购成本" prop="remark">
            <div class="fle-row align-center">
              <el-input
                v-model.number="ruleForm.cost"
                class="form-unit-input"
                placeholder="请输入数值，如10000"
              />
              <div class="mg-left-10 fz-14">元</div>
            </div>
          </el-form-item>

          <el-form-item label="使用年限" prop="serviceLife">
            <div class="fle-row align-center">
              <el-input
                v-model.number="ruleForm.serviceLife"
                class="form-unit-input"
                placeholder="请输入数值，如1"
              />
              <div class="mg-left-10">年</div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="isLoading" type="primary" size="small" @click="handleSubmit">
        提交
      </el-button>
      <el-button size="small" @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { handleScreenWidthToVw } from '@/utils/tools'
import { apiGetAssetTypeList } from '@/views/asset-type/api'
import { MAX_INTEGER } from '@/consts'

export default {
  components: {},
  props: {
    isShow: { type: Boolean, default: false },
    initData: { type: Object, default: () => {} },
  },
  data() {
    return {
      ruleForm: {},
      title: '新建',
      isLoading: false,
      assetTypeList: [],
    }
  },

  computed: {
    rules() {
      return {
        name: [{ required: true, message: '请输入资产名称', trigger: 'change' }],
        assetsTypeId: [{ required: true, message: '请选择资产类型', trigger: 'change' }],
      }
    },
    dialogTitle() {
      return `${this.title}档案`
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },

  watch: {
    initData: {
      deep: true,
      handler: function (value) {
        this.isLoading = false
        this.getAssetType()
        if (typeof value === 'object') {
          this.ruleForm = { ...value }
          value.id && (this.title = '修改')

          this.$nextTick(() => {
            this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
          })
        }
      },
    },
  },

  methods: {
    handleClose() {
      this.$emit('close')
    },

    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.isLoading = true

          this.$emit('submit', this.ruleForm)
        }
      })
    },
    async getAssetType() {
      try {
        const res = await apiGetAssetTypeList({ pageNo: 1, pageSize: MAX_INTEGER })
        this.assetTypeList = res.records || []
      } catch (error) {
        console.log(`apiGetAssetTypeList error ${error.message}`)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  // background: #f0f4f8;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dialog-container {
  display: flex;
  flex-direction: row;
}

.dialog-children {
  flex-shrink: 0;
}

.upload-info {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.avatar-uploader-icon {
  width: vw(160px);
  height: vw(160px);
  font-size: vw(28px);
  line-height: vw(160px);
  color: #8c939d;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar {
  display: block;
  width: vw(160px);
  height: vw(160px);
  border-radius: 50%;
}

.el-upload__tip {
  width: 100%;
  margin-top: vh(20px);
  font-size: vw(14px);
  color: #333;
  text-align: center;
}

::v-deep .el-form-item {
  margin-bottom: vh(20px) !important;
}

::v-deep .el-form-item__error {
  padding-top: 0;
}

.dialog-upload-contaienr {
  margin-top: vh(14px);
  margin-left: vw(16px);
}

.dialog-form-contaienr {
  margin-left: vw(80px);
}

.form-input {
  width: vw(220px);
}

.form-unit-input {
  width: vw(194px);
}
</style>
